<template>
  <div class="skeleton-loader" :class="{ 'with-animation': animated }">
    <div v-if="type === 'card'" class="skeleton-card">
      <div class="skeleton-img"></div>
      <div class="skeleton-content">
        <div class="skeleton-title"></div>
        <div class="skeleton-text"></div>
        <div class="skeleton-text"></div>
        <div class="skeleton-text skeleton-text-short"></div>
      </div>
    </div>
    
    <div v-else-if="type === 'list'" class="skeleton-list">
      <div v-for="i in count" :key="i" class="skeleton-list-item">
        <div class="skeleton-text skeleton-text-long"></div>
        <div class="skeleton-text skeleton-text-short"></div>
      </div>
    </div>
    
    <div v-else-if="type === 'paragraph'" class="skeleton-paragraph">
      <div v-for="i in count" :key="i" class="skeleton-text"></div>
      <div class="skeleton-text skeleton-text-short"></div>
    </div>
    
    <div v-else class="skeleton-custom">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SkeletonLoader',
  props: {
    type: {
      type: String,
      default: 'card',
      validator: value => ['card', 'list', 'paragraph', 'custom'].includes(value)
    },
    count: {
      type: Number,
      default: 3
    },
    animated: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.skeleton-loader {
  width: 100%;
  
  &.with-animation {
    .skeleton-img,
    .skeleton-title,
    .skeleton-text {
      position: relative;
      overflow: hidden;
      
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%);
        background-image: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0,
          rgba(255, 255, 255, 0.2) 20%,
          rgba(255, 255, 255, 0.5) 60%,
          rgba(255, 255, 255, 0)
        );
        animation: shimmer 2s infinite;
      }
    }
  }
  
  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }
  
  .skeleton-card {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    
    .skeleton-img {
      height: 200px;
      background-color: #f2f2f2;
    }
    
    .skeleton-content {
      padding: 15px;
      
      .skeleton-title {
        height: 24px;
        background-color: #f2f2f2;
        border-radius: 4px;
        margin-bottom: 15px;
      }
      
      .skeleton-text {
        height: 16px;
        background-color: #f2f2f2;
        border-radius: 4px;
        margin-bottom: 10px;
        
        &.skeleton-text-short {
          width: 60%;
        }
      }
    }
  }
  
  .skeleton-list {
    .skeleton-list-item {
      padding: 15px 0;
      border-bottom: 1px solid #f5f5f5;
      
      .skeleton-text {
        height: 16px;
        background-color: #f2f2f2;
        border-radius: 4px;
        margin-bottom: 10px;
        
        &.skeleton-text-long {
          height: 22px;
        }
        
        &.skeleton-text-short {
          width: 40%;
        }
      }
    }
  }
  
  .skeleton-paragraph {
    padding: 15px;
    
    .skeleton-text {
      height: 16px;
      background-color: #f2f2f2;
      border-radius: 4px;
      margin-bottom: 10px;
      
      &.skeleton-text-short {
        width: 70%;
      }
    }
  }
}
</style> 